<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 导入样式表 -->
  <link rel="stylesheet" href="./assets/news.css" />
</head>

<body>
  <!-- 新闻列表 -->
  <div id="news-list">
    <!-- 新闻的 item 项 -->

  </div>

  <!-- 导入axios -->
  <script src="./lib/axios.js"></script>
  <script>
    //请求地址：http://ajax-api.itheima.net/api/news
    //获取dom元素
    const list = document.querySelector('#news-list');

    async function render() {
      const { data: res } = await axios({
        url: 'http://ajax-api.itheima.net/api/news',
        method: 'GET',
      })
      // console.log(res);
      const { data } = res

      list.innerHTML = data.map((item) => {
        return `
          <div class="news-item">
            <img class="thumb" src=${item.img} alt="" />
            <div class="right-box">
              <!-- 新闻标题 -->
              <h1 class="title">${item.title}</h1>
              <div class="footer">
                <div>
                  <!-- 新闻来源 -->
                  <span>${item.source}</span>&nbsp;&nbsp;
                  <!-- 发布日期 -->
                  <span>${item.time}</span>
                </div>
                <!-- 评论数量 -->
                <span>评论数：${item.cmtcount}</span>
              </div>
            </div>
          </div>
          `
      }).join('')
    }

    render() 
  </script>
</body>

</html>